<template>
  <section style="padding-bottom: 30px">
    <div class="header">
      <p v-for="(item,index) in itemList" :key="index" :active="active" :class="index == active ? 'sp_color':''"
         @click="topBtn(item,index)">{{item.name}}</p>
    </div>
    <div style="padding-bottom: 1.2rem;"></div>
    <div v-if="active == 0" class="big_pt" style="margin-top: 0">
      <div class="tit">
        <img src="../../assets/index/line.png" class="line">
        <span class="weight">车辆信息</span>
      </div>
      <ul>
        <li>
          <span>车牌号</span>
          <span>{{plateNumber}}</span>
        </li>
        <li>
          <span>车架号</span>
          <span>{{vin}}</span>
        </li>
        <li>
          <span>发动机号</span>
          <span>{{engineNumber}}</span>
        </li>
        <li>
          <span>车辆类型</span>
          <span>{{carType}}</span>
        </li>
        <li>
          <span>使用性质</span>
          <span>{{useType}}</span>
        </li>
        <li>
          <span>座位数</span>
          <span>{{count}}</span>
        </li>
        <li>
          <span>车辆品牌</span>
          <span>{{vehicleBrand}}</span>
        </li>
      </ul>
    </div>
    <div v-if="active == 1">
      <div v-for="(item,index) in infoList" :key="index" v-if="item.insuranceInfo.type == 2">
      <div class="big_pt" style="margin-top: 0;">
        <div class="tit">
          <img src="../../assets/index/line.png" class="line">
          <span class="weight">保单信息</span>
        </div>
        <ul>
          <li>
            <span>保单号</span>
            <span class="im_col">{{item.insuranceInfo.insuranceNo}}</span>
          </li>
          <li>
            <span>保单类型</span>
            <span>商业险</span>
          </li>
          <li>
            <span>险种</span>
            <span>{{item.insuranceInfo.cata}}</span>
          </li>
          <li>
            <span>保险公司</span>
            <span>{{item.insuranceInfo.company}}</span>
          </li>
          <li>
            <span>投保人姓名</span>
            <span>{{item.insuranceInfo.applicant}}</span>
          </li>
          <li>
            <span>被保人姓名</span>
            <span>{{item.insuranceInfo.insurer}}</span>
          </li>
          <li>
            <span>被保人证件号</span>
            <span>{{item.insuranceInfo.insurerId}}</span>
          </li>
          <li>
            <span>保额</span>
            <span v-if="item.insuranceInfo.coverage == ''"></span>
            <span v-else>{{item.insuranceInfo.coverage}}元</span>
          </li>
          <li>
            <span>保费</span>
            <span v-if="item.insuranceInfo.premium == ''"></span>
            <span>{{item.insuranceInfo.premium}}元</span>
          </li>
          <li>
            <span>起保时间</span>
            <span>{{item.insuranceInfo.startTime}}</span>
          </li>
          <li>
            <span>终保时间</span>
            <span>{{item.insuranceInfo.endTime}}</span>
          </li>
          <li>
            <span>状态</span>
            <span>{{item.insuranceInfo.status}}</span>
          </li>
        </ul>
      </div>
      <div class="big_pt">
        <div class="tit">
          <img src="../../assets/index/line.png" class="line">
          <span class="weight">投保详情</span>
        </div>
        <ul v-for="(item2,index2) in item.insureDetail" :key="index2">
          <li>
            <span>险种</span>
            <span>{{item2.cata}}</span>
          </li>
          <li>
            <span>保额</span>
            <span v-if="item2.coverage == ''"></span>
            <span v-else>{{item2.coverage}}元</span>
          </li>
          <li>
            <span>浮动比例</span>
            <span>{{item2.rate}}</span>
          </li>
          <li>
            <span>保费</span>
            <span class="im_col" v-if="item2.premium == ''"></span>
            <span class="im_col" v-else>{{item2.premium}}元</span>
          </li>
        </ul>
      </div>
      <div class="big_pt">
        <div class="tit">
          <img src="../../assets/index/line.png" class="line">
          <span class="weight">缴费信息</span>
        </div>
        <ul>
          <li>
            <span>应付保费</span>
            <span class="im_col" v-if="item.feeInfo.need == ''"></span>
            <span class="im_col" v-else>{{item.feeInfo.need}}元</span>
          </li>
          <li>
            <span>已缴保费</span>
            <span class="im_col" v-if="item.feeInfo.paid == ''"></span>
            <span class="im_col" v-else>{{item.feeInfo.paid}}元</span>
          </li>
          <li>
            <span>欠缴</span>
            <span v-if="item.feeInfo.notPay == ''">0.00元</span>
            <span v-else>{{item.feeInfo.notPay}}元</span>
          </li>
          <li>
            <span>缴费方式</span>
            <span>{{item.feeInfo.payWay}}</span>
          </li>
          <li>
            <span>缴费时间</span>
            <span>{{item.feeInfo.payDate}}</span>
          </li>
        </ul>
      </div>
      <div class="big_pt">
        <div class="tit">
          <img src="../../assets/index/line.png" class="line">
          <span class="weight">理赔详情</span>
        </div>
        <ul v-for="(item3,index3) in item.claims" :key="index3">
          <li>
            <span>出险时间</span>
            <span>{{item3.filingDate}}</span>
          </li>
          <li>
            <span>出险原因</span>
            <span>{{item3.reason}}</span>
          </li>
          <li>
            <span>出险地点</span>
            <span>{{item3.filingAdd}}</span>
          </li>
          <li>
            <span>驾驶人</span>
            <span>{{item3.driver}}</span>
          </li>
          <li>
            <span>报案人</span>
            <span>{{item3.informant}}</span>
          </li>
          <li>
            <span>状态</span>
            <span>{{item3.status}}</span>
          </li>
          <li>
            <span>报案号</span>
            <span>{{item3.caseNo}}</span>
          </li>
          <li>
            <span>报案时间</span>
            <span>{{item3.reportTime}}</span>
          </li>
          <li>
            <span>赔付金额</span>
            <span v-if="item3.amount != ''">{{item3.amount}}元</span>
            <span v-else>{{item3.amount}}</span>
          </li>
        </ul>
      </div>
    </div>
      <div v-if="state1">
        <img src="../../assets/sech/no_tip.png" style="width: 4rem;margin-top: .86rem;">
        <p style="margin-top: .3rem;color: #666;">暂无相关信息</p>
      </div>
    </div>

    <div v-if="active == 2">
      <div v-for="(item,index) in infoList" :key="index" v-if="item.insuranceInfo.type == 1">
        <div class="big_pt" style="margin-top: 0;">
          <div class="tit">
            <img src="../../assets/index/line.png" class="line">
            <span class="weight">保单信息</span>
          </div>
          <ul>
            <li>
              <span>保单号</span>
              <span class="im_col">{{item.insuranceInfo.insuranceNo}}</span>
            </li>
            <li>
              <span>保单类型</span>
              <span>交强险</span>
            </li>
            <li>
              <span>险种</span>
              <span>{{item.insuranceInfo.cata}}</span>
            </li>
            <li>
              <span>保险公司</span>
              <span>{{item.insuranceInfo.company}}</span>
            </li>
            <li>
              <span>投保人姓名</span>
              <span>{{item.insuranceInfo.applicant}}</span>
            </li>
            <li>
              <span>被保人姓名</span>
              <span>{{item.insuranceInfo.insurer}}</span>
            </li>
            <li>
              <span>被保人证件号</span>
              <span>{{item.insuranceInfo.insurerId}}</span>
            </li>
            <li>
              <span>保额</span>
              <span v-if="item.insuranceInfo.coverage == ''"></span>
              <span v-else>{{item.insuranceInfo.coverage}}元</span>
            </li>
            <li>
              <span>保费</span>
              <span v-if="item.insuranceInfo.premium == ''"></span>
              <span>{{item.insuranceInfo.premium}}元</span>
            </li>
            <li>
              <span>起保时间</span>
              <span>{{item.insuranceInfo.startTime}}</span>
            </li>
            <li>
              <span>终保时间</span>
              <span>{{item.insuranceInfo.endTime}}</span>
            </li>
            <li>
              <span>状态</span>
              <span>{{item.insuranceInfo.status}}</span>
            </li>
          </ul>
        </div>
        <div class="big_pt">
          <div class="tit">
            <img src="../../assets/index/line.png" class="line">
            <span class="weight">投保详情</span>
          </div>
          <ul v-for="(item2,index2) in item.insureDetail" :key="index2">
            <li>
              <span>险种</span>
              <span>{{item2.cata}}</span>
            </li>
            <li>
              <span>保额</span>
              <span v-if="item2.coverage == ''"></span>
              <span v-else>{{item2.coverage}}元</span>
            </li>
            <li>
              <span>浮动比例</span>
              <span>{{item2.rate}}</span>
            </li>
            <li>
              <span>保费</span>
              <span class="im_col" v-if="item2.premium == ''"></span>
              <span class="im_col" v-else>{{item2.premium}}元</span>
            </li>
          </ul>
        </div>
        <div class="big_pt">
          <div class="tit">
            <img src="../../assets/index/line.png" class="line">
            <span class="weight">缴费信息</span>
          </div>
          <ul>
            <li>
              <span>应付保费</span>
              <span class="im_col" v-if="item.feeInfo.need == ''"></span>
              <span class="im_col" v-else>{{item.feeInfo.need}}元</span>
            </li>
            <li>
              <span>已缴保费</span>
              <span class="im_col" v-if="item.feeInfo.paid == ''"></span>
              <span class="im_col" v-else>{{item.feeInfo.paid}}元</span>
            </li>
            <li>
              <span>欠缴</span>
              <span v-if="item.feeInfo.notPay == ''">0.00元</span>
              <span v-else>{{item.feeInfo.notPay}}元</span>
            </li>
            <li>
              <span>缴费方式</span>
              <span>{{item.feeInfo.payWay}}</span>
            </li>
            <li>
              <span>缴费时间</span>
              <span>{{item.feeInfo.payDate}}</span>
            </li>
          </ul>
        </div>
        <div class="big_pt">
          <div class="tit">
            <img src="../../assets/index/line.png" class="line">
            <span class="weight">理赔详情</span>
          </div>
          <ul v-for="(item3,index3) in item.claims" :key="index3">
            <li>
              <span>出险时间</span>
              <span>{{item3.filingDate}}</span>
            </li>
            <li>
              <span>出险原因</span>
              <span>{{item3.reason}}</span>
            </li>
            <li>
              <span>出险地点</span>
              <span>{{item3.filingAdd}}</span>
            </li>
            <li>
              <span>驾驶人</span>
              <span>{{item3.driver}}</span>
            </li>
            <li>
              <span>报案人</span>
              <span>{{item3.informant}}</span>
            </li>
            <li>
              <span>状态</span>
              <span>{{item3.status}}</span>
            </li>
            <li>
              <span>报案号</span>
              <span>{{item3.caseNo}}</span>
            </li>
            <li>
              <span>报案时间</span>
              <span>{{item3.reportTime}}</span>
            </li>
            <li>
              <span>赔付金额</span>
              <span v-if="item3.amount != ''">{{item3.amount}}元</span>
              <span v-else>{{item3.amount}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div v-if="state2">
        <img src="../../assets/sech/no_tip.png" style="width: 4rem;margin-top: .86rem;">
        <p style="margin-top: .3rem;color: #666;">暂无相关信息</p>
      </div>
    </div>
  </section>
</template>

<script>
  export default {
    name: "carPolicyResult",
    data() {
      return {
        active: '0',
        itemList: [
          {name: '车辆信息'},
          {name: '商业险'},
          {name: '交强险'}
        ],
        code:'',
        carType:'',
        count:'',
        engineNumber:'',
        plateNumber:'',
        useType:'',
        vehicleBrand:'',
        vin:'',
        infoList:[],
        errorMsg:'',
        state1:true,
        state2:true,
      }
    },
    methods: {
      topBtn(item, index) {
        this.active = index;
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
      }
    },
    created(){
      let obj = JSON.parse(sessionStorage.getItem('TO_OBJECT'));
      this.code = obj.code;
      if(obj.code == 200){
        this.carType = obj.basic.carType;//车辆类型
        this.count = obj.basic.count;//座位数
        this.engineNumber = obj.basic.engineNumber;//发动机号
        this.plateNumber = obj.basic.plateNumber;//车牌号
        this.useType = obj.basic.useType;//使用性质
        this.vehicleBrand = obj.basic.vehicleBrand;//车辆品牌
        this.vin = obj.basic.vin;//车架号
        this.infoList = obj.allInfo;
        this.errorMsg = '';
      }else{
        this.errorMsg = obj.message;
      }
      obj.allInfo.forEach((val,idx)=>{
        if(val.insuranceInfo.type == 2){
          this.state1 = false;
        }
        if(val.insuranceInfo.type == 1){
          this.state2 = false;
        }
      })
    }
  }
</script>

<style scoped>
  .header {
    width: 100%;
    height: .8rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 2px 2px 10px rgba(128, 128, 128, .2);
    position: fixed;
    background: #fff;
    top: 0;
    left: 0;
    z-index: 999;
  }

  .header p {
    line-height: .66rem;
    position: relative;
    top: 2px;
  }

  .sp_color {
    color: red;
    border-bottom: 2px solid red;
  }

  .line {
    width: 5px;
    height: 25px;
    position: absolute;
    left: 0;
  }

  .tit {
    display: flex;
    align-items: center;
    height: 1rem;
  }

  .big_pt {
    margin-top: .4rem;
    padding: 0rem .3rem 0rem .3rem;
    box-shadow: 2px 2px 10px rgba(128, 128, 128, .2);
  }

  .big_pt ul {
    padding-top: .3rem;
    border-top: 1px solid #f2f2f2;
  }

  .big_pt li {
    display: flex;
    text-align: left;
    padding-bottom: .3rem;
    align-items: center;
  }
  .big_pt li span:nth-child(1){
    width: 2.4rem;
    flex: none;
    color:#929292;
  }
  .im_col {
    color: #31AEEF;
  }

  .weight {
    font-weight: bold;
  }
</style>
